<template>
  <view class="page">
    <view class="padding">
      <ListAddress
        ref="RefData"
        @checkShow="onCheckDel"
        @checkItem="onCheckItem"
        @clickItem="onClickAddress"
      />
    </view>
    <view v-if="!$data.checkItem && !$data.delShow" class="foot foot_box">
      <view class="btn btn_add" @tap="jump">新增服务地址</view>
    </view>
    <view v-else class="foot foot_box">
      <view class="btn btn_cancel" @tap="onCancle">取消</view>
      <view class="btn btn_del" @tap="onDel">删除</view>
    </view>
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import {
  onLoad,
  onShow,
  onReady,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import BasicConfig from "../../../utils/config";
import ListAddress from "./components/ListAddress.vue";
import { jumpPage } from "../../../utils/route/route";
import { delAddress } from "../../../api/Interface/address";
import errorCode from "../../../utils/http/errorCode";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  delShow: false, // 显示批量删除按钮
  checkItem: false, // 勾选了至少一个地址
  delList: [], // 要删除的选项集合
  /**
   * 页面进入类型
   * eventBus.service.address : 确认订单-选择地址进入
   */
  fromType: null,
});
const searchObj = reactive({
  page: 1,
  limit: 20,
});
const jump = () => {
  jumpPage({
    to: "/package-my/pages/addressManage/edit",
    login: true,
  });
};
const onCheckDel = (e) => {
  $data.delShow = e;
};
const onCancle = () => {
  $data.delShow = false;
  $data.checkItem = false;
  RefData.value.onCancelDel();
};
const onCheckItem = (e) => {
  $data.checkItem = e.length > 0;
  $data.delList = e;
};
const onDel = () => {
  if ($data.length === 0) return;
  uni.showModal({
    content: "确认删除?",
    success: (success) => {
      if (success.confirm) {
        const userAddressId = $data.delList
          .map((m) => m.userAddressId)
          .join(",");
        console.log("userAddressId", userAddressId);
        delAddress({ userAddressId }).then((res) => {
          BasicConfig.toast(res.msg);
          if (res.code === errorCode.success) {
            onCancle();
            fnGetDatas($vm.$ListLoadEnum.load);
          }
        });
      }
    },
  });
};
const onClickAddress = (e) => {
  if ($data.fromType) {
    uni.$emit($data.fromType, e);
    uni.navigateBack({
      delta: 1,
    });
  }
};
const RefData = ref();
/** 获取数据列表 */
const fnGetDatas = (type = $vm.$ListLoadEnum.load) => {
  RefData.value.loadDatas(type, searchObj);
};
onShow(() => {
  // nextTick(() => {
  //   fnGetDatas($vm.$ListLoadEnum.load);
  // });
  setTimeout(() => {
    fnGetDatas($vm.$ListLoadEnum.load);
  }, 1000);
});
onLoad((options) => {
  $data.fromType = options.fromType || null;
});
onReady(() => {});
/** 下滑加载 */
onReachBottom(() => {
  fnGetDatas($vm.$ListLoadEnum.bottom);
});
/** 下拉刷新 */
onPullDownRefresh(() => {
  fnGetDatas($vm.$ListLoadEnum.load);
});
</script>

<style lang="scss" scoped>
.page {
  background: #f4f8fb;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 300rpx;
  .foot_box {
    padding: 30rpx;
    z-index: 9;
    background: #ffffff;
    display: flex;
    align-items: center;
    .btn {
      // width: 90%;
      margin: auto;
      // padding: 30rpx;
      border-radius: 100rpx;
      text-align: center;
      font-size: 34rpx;
    }
    .btn_add {
      background: $main-color;
      color: #ffffff;
      flex: 3;
    }
    .btn_del {
      background: #e61111;
      border: 1px solid #e61111;
      color: #ffffff;
      flex: 3;
      margin-right: 30rpx;
    }
    .btn_cancel {
      background: #ffffff;
      border: 1px solid #8a8a8a;
      color: #8a8a8a;
      flex: 1;
      margin-right: 30rpx;
    }
  }
}
</style>
